<template>
  <div class="frame">
    <Header />
    <div class="center">
      <div class="left">
        <el-tabs tab-position="left" style="height: 500px" v-model="activeName">
          <el-tab-pane name="first">
            <div slot="label">私信</div>
          </el-tab-pane>

          <el-tab-pane name="second"
            ><div slot="label" @click.prevent="toSytemInforms">
              系统通知
            </div></el-tab-pane
          >
          <el-tab-pane name="third"
            ><div slot="label">新增粉丝</div></el-tab-pane
          >
          <el-tab-pane name="fourth"
            ><div slot="label">赞和私信</div></el-tab-pane
          >
          <el-tab-pane name="fifth"
            ><div slot="label">评论与@</div></el-tab-pane
          >
          <el-tab-pane name="sixth"
            ><div slot="label">消息设置</div></el-tab-pane
          >
        </el-tabs>
      </div>
      <div class="right">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "../../components/Header.vue";
export default {
  name: "CreativeCenter",
  components: {
    Header,
  },
  data() {
    return {
      activeName: "second", //默认开启的页面光标
      getSocketData: "",
      
    };
  },
  methods: {
    //点击系统通知页面
    toSytemInforms() {
      this.$router.push({
        name: "SytemInforms",
      });
    },
   
  },
  mounted() {
    //存储点击序号
    if (sessionStorage.getItem("activeName")) {
      this.activeName = sessionStorage.getItem("activeName");
    }
    this.getSocketData = (e) => {
      const data = e && e.detail.data;
      //这边编写处理服务端消息代码
      console.log(data);
    };
    window.addEventListener("onmessageWS", this.getSocketData);
  },
  beforeDestroy() {
    //销毁存储的序号
    if (sessionStorage.getItem("activeName")) {
      sessionStorage.removeItem("activeName");
    }
    // window.removeEventListener("onmessageWS", this.getSocketData);
  },
  watch: {
    activeName() {
      sessionStorage.setItem("activeName", this.activeName);
    },
  },
};
</script>

<style lang="less" scoped>
.frame {
  background-color: #fafafa;
  min-height: 100%;
}
* {
  list-style: none;
}

.center {
  width: 100%;
  // min-height: 700px;
  // background-color: #fafafa;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
  .left {
    width: 280px;
    margin-top: 30px;
    margin-left: 20px;
    position: relative;
    top: 0;
    left: 0;
    float: left;
    vertical-align: top;
    /deep/ .el-tabs__item {
      height: 60px;
      line-height: 60px;
      font-size: 16px;
    }
  }
  .right {
    background-color: #fff;
    margin-left: 50px;
    width: 1000px;
    margin-top: 50px;
    margin-left: 330px;
    padding: 30px;
  }
}
</style>